<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>笔记图片上传</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="./js/axios.js"></script>
</head>
<style>
    #upload {
        height: 400px;
        width: 700px;
    }
    #upload img {
        width: 700px;
    }
</style>
<body>
    <div id="upload">
        <input type="file" value="" @change="getImgPath($event)"/>
        <img :src="content" alt="">
        <a :href="content">{{content}}</a>
    </div>
    <script>


        new Vue({
            el: "#upload",
            data: {
                content: "#"
            },
            computed: {

            },
            created: function () {

            },
            methods:{

                getImgPath(e) {
                    var self = this;
                    console.log(e)
                    //创建一个FormData对象,用来组装一组用 XMLHttpRequest发送请求的键/值对
                    var fd = new FormData();
                    // 把 input 标签获取的文件加入 FromData 中
                    fd.append('file', e.target.files[0]);

                    axios({
                        method: "POST",
                        url: "/upload",
                        data: fd
                    }).then(function(resp) {
                        console.log(resp.data);
                        self.content = 'getPic?path=' + resp.data;
                    }).catch(function (resp) {
                        console.log(resp)
                        console.log("请求失败");
                    });
                }
            }
        });


    </script>
</body>
</html>